<template>
  <div class="email-login-container">
    <van-icon  style="margin-left: -350px;margin-top: 10px" name="arrow-left" @click="goBack" />

    <div class="header">
      <span>邮箱验证码登录</span>
    </div>

    <div class="form">
      <van-field
          v-model="user.email"
          placeholder="请输入邮箱"
          clearable
      />
      <van-field
          v-model="user.code"
          placeholder="请输入验证码"
          clearable
      >
        <template #button>
          <van-button size="small" type="primary" @click="sendCode" :disabled="isCounting">
            {{ isCounting ? countdown + '秒' : '发送验证码' }}
          </van-button>
        </template>
      </van-field>
      <div class="submit">
        <van-button type="primary" block @click="login">登录</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      isCounting: false,
      countdown: 60,
      timer: null,
      user: {
        email: '',
        code: ''
      }
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1); // 返回上一页
    },
    sendCode() {
      if (this.user.email === '') {
        this.$toast.fail("请输入邮箱");
        return;
      }
      // 简单的邮箱格式验证
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(this.user.email)) {
        this.$toast.fail("请输入合法邮箱");
        return;
      }

      // 发送验证码请求
      axios.post(`http://localhost:9999/api-user/user/sendemail?email=` + this.user.email).then(res => {
        if (res.data.code === 1) {
          this.$toast.success("验证码已发送");

          // 开始倒计时
          this.isCounting = true;
          this.countdown = 60;
          this.timer = setInterval(() => {
            if (this.countdown <= 0) {
              this.isCounting = false;
              clearInterval(this.timer);
            } else {
              this.countdown--;
            }
          }, 1000);
        } else {
          this.$toast.fail(res.data.message);
        }
      }).catch(() => {
        this.$toast.fail("发送失败");
      });
    },
    login() {
      if (this.user.email === '') {
        this.$toast.fail("请输入邮箱");
        return;
      }
      if (this.user.code === '') {
        this.$toast.fail("请输入验证码");
        return;
      }

      axios.post(`http://localhost:9999/api-user/user/login3?email=` + this.user.email + '&code=' + this.user.code).then(res => {
        if (res.data.code === 1) {
          this.$toast.success("登录成功");
          let user = res.data.data;
          let user1=user[0];
          localStorage.setItem("user",JSON.stringify(user1))
              // alert(userphone);
          this.$router.push({path:'/mine'})
        } else {
          this.$toast.fail(res.data.message);
        }
      });
    }
  },
  beforeDestroy() {
    // 清理定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
};
</script>

<style scoped>
.email-login-container {
  min-height: 100vh;
  background: #fff;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  font-size: 20px;
}

.form {
  padding: 20px 16px;
}

.submit {
  margin-top: 24px;
}
</style>